<div class="${baseClass}" data-dojo-attach-point="focusNode"
    data-ngw-serialize-prefix="${prefix}"
    style="width: 100%; height: 100%; padding: 0;">

    <div data-dojo-type="dijit/layout/BorderContainer"
        data-dojo-props="gutters: false"
        style="width: 100%; height: 100%">

        <div data-dojo-type="dijit/Toolbar"
            data-dojo-props="region: 'top'">
            <div data-dojo-type="dijit/form/Button"
                data-dojo-attach-event="onClick: qmlShowDialog">
                {{gettext 'Import QGIS style'}}
            </div>
        </div>

        <div data-dojo-attach-point="xml" 
            data-dojo-type="ngw-pyramid/form/CodeMirror"
            data-dojo-props="region: 'center', lang: 'xml', lineNumbers: true"
            data-ngw-serialize="xml"
            style="width: 100%; height: 100%;"></div>

    </div>

    <div data-dojo-attach-point="qmlDialog"
        data-dojo-type="dijit/Dialog"
        title="{{gettext 'Import QGIS style'}}"
        style="display: none; width: 600px;">

        <div data-dojo-attach-point="qmlUploader" 
            data-dojo-type="ngw-file-upload/Uploader">
        </div>

        <div class="dijitDialogPaneContentArea">
            <div data-dojo-attach-point="qmlPreview"
                data-dojo-type="ngw-pyramid/form/CodeMirror"
                data-dojo-props="mode: 'xml', lineNumbers: true"
                style="height: 400px;">
            </div>
        </div>

        <div class="dijitDialogPaneActionBar">
            <div data-dojo-type="dijit/form/Button"
                data-dojo-attach-event="onClick: qmlAccept">
                Ok
            </div>
        </div>
    </div>

</div>
